<template>
  <el-container>
    <el-main>
      <div class="title_box">
        <span class="title">&nbsp;{{classes.name}}|{{course.name}}&nbsp;</span>
      </div>
      <div class="result_box">
        <el-row :gutter="15">
          <el-col :span="2.5" v-for="item in studentList" :key="item.id">
            <div @click="handleGrade(item)" :style="item.score===undefined?'background-color: red;color: white':'background-color: chartreuse'" class="student_box">
              <el-button class="title">{{item.score?item.name+' | '+item.score:item.name}}</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-dialog
          title="成绩录入"
          :visible.sync="dialogVisible"
          width="20%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="学号">
            <el-input v-model="form.studentId" disabled style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name" disabled style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item label="分数">
            <el-input type="number" v-model="form.score" style="width: 70%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import {queryStudentListByClass} from "@/api/student";
import {addExam, updateExam} from "@/api/exam";
import {queryCourseById} from "@/api/course";
import {queryClassById} from "@/api/class";

export default {
  name: "GradePage",
  data(){
    return{
      classesId: this.$route.params.classesId,
      courseId: this.$route.params.courseId,
      year: this.$route.params.year,
      studentList: [],
      dialogVisible: false,
      form: {},
      course: [],
      classes: [],
      user: JSON.parse(sessionStorage.getItem("user")),
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      queryStudentListByClass({classId:this.classesId,courseId:this.courseId,year:this.year}).then(res => {
        this.studentList = res.data;
      })
      queryCourseById({courseId:this.courseId}).then(res => {
        this.course = res.data;
      })
      queryClassById({classId:this.classesId}).then(res => {
        this.classes = res.data
      })
      loading.close();
    },
    handleGrade(exam){
      this.form={};
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(exam));
    },
    handleSubmit(){
      if (this.form.score===undefined){
        this.$message.info("表单未填写完整");
        return;
      }
      this.form.courseId = this.course.id;
      this.form.teacherId = this.user.id;
      this.form.year = this.year;
      this.form.createTime = new Date();
      this.form.classesId = this.classesId;
      console.log(this.form)
      if (this.form.id){//更新
        console.log("更新");
        updateExam(this.form).then(res => {
          console.log(res)
          if (res.code===0){
            this.$message.success(res.message);
            this.load();
          }else {
            this.$message.error(res.message);
          }
          this.dialogVisible = false;
        })
      }else {//增加
        console.log("增加");
        addExam(this.form).then(res => {
          console.log(res)
          if (res.code===0){
            this.$message.success(res.message);
            this.load();
          }else {
            this.$message.error(res.message);
          }
          this.dialogVisible = false;
        })
      }
    }
  },
}
</script>

<style lang="less" scoped>

.title_box{
  margin-bottom: 20px;
  text-align: center;
  .title{
    font-family: 华文行楷,serif;
    font-weight: bold;
    border: solid 1px #eee;
    border-radius: 3%;
    padding: 5px;
    //外圈阴影
    box-shadow: 0 0 10px #ddd;
    color: gray;
    font-size: 40px;
  }
}

.result_box{
  width: 100%;
  //background-color: chartreuse;
  .student_box{
    transition: all 0.1s;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 8%;
    cursor: pointer;
  }
  .student_box:hover{
    //外圈阴影
    box-shadow:1px 1px 5px #ccc;
    transform: scale(1.1);
  }
}

</style>